<template>
	<view class="home-container">
		<view class="home-title">
			<!-- <view class="title">首页</view> -->
		</view>

		<view class="outer">
			<view class="tab-nav">
				<view class="userInfo">
					<view>
						<image src="../../static/person.png" alt="">
					</view>
					<view>{{userInfo.nickName}}</view>
				</view>
				<view class="nav">
					<view class="nav-item" v-for="item in navList" :key="item.id" @click="goTo(item.path)">
						<view class="nav-box">
							<image :src="item.src" mode="aspectFill"></image>
						</view>
						<!-- <image :src="item.src" mode="aspectFill"></image> -->
						<view class="text">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<!-- 施工区信息 -->
			<view class="roadwork-info">
				<view class="title">施工区信息</view>
				<view class="sub-title">
					{{roadworkTitleInfo.engName}}【{{roadworkTitleInfo.beginStakeNo}}】{{roadworkTitleInfo.engStartName}}-{{roadworkTitleInfo.engEndName}}
				</view>
				<view class="content">
					<view class="item">
						<view>施工进度</view>
						<view>{{roadworkInfo.engProgress}}%</view>
					</view>
					<view class="item">
						<view>当前车速</view>
						<view>{{roadworkInfo.speed}}km/h</view>
					</view>
					<view class="item">
						<view>施工公里数</view>
						<view>{{roadworkInfo.engMileage}}KM</view>
					</view>
					<view class="item">
						<view>车流量</view>
						<view>{{roadworkInfo.volume}}辆/h</view>
					</view>
					<view class="item">
						<view>拥堵系数</view>
						<view>1.2</view>
					</view>
					<view class="item">
						<view>天气概况</view>
						<view>{{roadworkInfo.temperature}}℃ {{weather}}
							{{roadworkInfo.windDirectionName}}风{{roadworkInfo.windSpeed}}级
						</view>
					</view>
				</view>
			</view>
			<!-- 施工区状态信息 -->
			<view class="status-info">
				<view class="title">施工区设备状态信息</view>
				<view class="content">
					<view class="item">
						<view class="item-title">移动监测站</view>
						<view class="item-item" v-for="item in roadworkDeviceInfo.monitorStation" :key="item.deviceId">
							<view>设备名称: {{item.deviceName}}</view>
							<view>IP: {{item.deviceIp == null ? '' : item.deviceIp}}</view>
							<view class="online">
								状态:
								{{(item.deviceStatus==='1' && item.existAlarm === true) ? '告警': (item.deviceStatus==='1'&&item.existAlarm === false ? '在线': '离线')}}
								<text class="tag"
									:style="{backgroundColor: (item.deviceStatus==='1' && item.existAlarm === true) ? '#ff802b': (item.deviceStatus==='1'&&item.existAlarm === false ? '#24f57f': '#ccc')}"></text>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="item-title">爆闪灯</view>
						<view class="item-item" v-for="item in roadworkDeviceInfo.strobeLight" :key="item.deviceId">
							<view>设备名称: {{item.deviceName}}</view>
							<view class="online">
								状态:
								{{(item.deviceStatus==='1' && item.existAlarm === true) ? '告警': (item.deviceStatus==='1'&&item.existAlarm === false ? '在线': '离线')}}
								<text class="tag"
									:style="{backgroundColor: (item.deviceStatus==='1' && item.existAlarm === true) ? '#ff802b': (item.deviceStatus==='1'&&item.existAlarm === false ? '#24f57f': '#ccc')}"></text>
							</view>
						</view>

					</view>
					<view class="item">
						<view class="item-title">护栏</view>
						<view class="item-item" v-for="item in roadworkDeviceInfo.guardrail" :key="item.deviceId">
							<view>设备名称: {{item.deviceName}}</view>
							<view class="online">
								状态:
								{{(item.deviceStatus==='1' && item.existAlarm === true) ? ' 告警': (item.deviceStatus==='1'&&item.existAlarm === false ? ' 在线': ' 离线')}}
								<text class="tag"
									:style="{backgroundColor: (item.deviceStatus==='1' && item.existAlarm === true) ? '#ff802b': (item.deviceStatus==='1'&&item.existAlarm === false ? '#24f57f': '#ccc')}"></text>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myRequest
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				title: 'Hello',
				navList: [{
						id: 1,
						name: '设备告警',
						src: require('../../static/warn1.png'),
						path: '/pages/warn/index'
					},
					{
						id: 2,
						name: '实时监控',
						src: require('../../static/video.png'),
						path: '/pages/monitor/index'
					},
					{
						id: 3,
						name: '交通事件',
						src: require('../../static/event1.png'),
						path: '/pages/event/index'
					}
				],
				roadworkInfo: {}, //施工区信息列表
				roadworkDeviceInfo: {}, // 设备列表
				roadworkTitleInfo: {},
				roadInfo: {}, //路段所有信息
				userInfo: {}, //用户登录信息
				city: "武汉",
				weather: ''
			}
		},
		onLoad() {

			this.getRoadworkDeviceInfo()
			this.queryRoadworkInfo()
			this.getRoadInfo()
			this.getUserInfo()
			this.getWeather()
		},
		methods: {
			async getWeather() {
				uni.request({
					url: 'http://wthrcdn.etouch.cn/weather_mini?city=' + this.city,
					success: (res) => {
						this.weather = res.data.data.forecast[0].type
					}
				})
			},
			//获取路段信息
			getRoadInfo() {
				const token = uni.getStorageSync('token');
				uni.request({
					url: 'http://106.15.2.249:60000/bdmp/public/assets/getComponeyWayGeo',
					method: "POST",
					header: {
						'Authorization': 'Bearer ' + token
					},
					success: (res) => {
						const {
							data,
							code,
							msg
						} = res.data
						if (code === '200') {
							this.roadInfo = data[0]
							this.getRoadworkInfo(this.roadInfo.id)
							uni.setStorageSync('info', this.roadInfo)
						}
					}
				})
			},
			// 获取用户登录信息
			getUserInfo() {
				const token = uni.getStorageSync('token');
				uni.request({
					url: 'http://106.15.2.249:60000/bdmp/public/user/info',
					method: "get",
					header: {
						'Authorization': 'Bearer ' + token
					},
					success: (res) => {
						const {
							data,
							code,
							msg
						} = res.data
						if (code === '200') {
							this.userInfo = data
						}
					}
				})
			},
			// 点击tab页面跳转
			goTo(path) {
				// 跳转到事件列表时传参
				if (path === '/pages/event/index') {
					uni.navigateTo({
						url: `${path}?nodeId=${this.roadInfo.nodeId}&nodeType=${this.roadInfo.nodeType}`
					});
				} else {
					uni.navigateTo({
						url: path
					});
				}

			},
			// 获取施工区信息
			async getRoadworkInfo(wayId) {
				const {
					data: {
						code,
						data,
						msg
					}
				} = await myRequest({

					//#ifdef  H5
					url: `/btp/system/eng/app/findEngByWayId?wayId=${wayId}`,
					//#endif
					//#ifdef  MP-WEIXIN
					url: `http://139.224.204.68:10001/btp/system/eng/app/findEngByWayId?wayId=${wayId}`,
					//#endif
					method: 'POST',
				})
				if (code == '200') {
					this.roadworkInfo = data
				} else {
					uni.showToast({
						title: "请求接口失败！"
					})
				}
			},
			// 查询施工区信息
			async queryRoadworkInfo() {
				const {
					data: {
						code,
						data,
						msg
					}
				} = await myRequest({
					//#ifdef  H5
					url: '/btp/system/eng/findEngById?engId=1468057546880618497',
					//#endif
					//#ifdef  MP-WEIXIN
					url: 'http://139.224.204.68:10001/btp/system/eng/findEngById?engId=1468057546880618497',
					//#endif
				})
				if (code == '200') {
					this.roadworkTitleInfo = data
				} else {
					uni.showToast({
						title: "请求接口失败！"
					})
				}
			},

			// 获取施工区设备信息
			async getRoadworkDeviceInfo() {
				const {
					data: {
						code,
						data,
						msg
					}
				} = await myRequest({
					//#ifdef  H5
					url: '/btp/system/gis/resource/getWorkResource?engId=1468057546880618497',
					//#endif
					//#ifdef  MP-WEIXIN
					url: 'http://139.224.204.68:10001/btp/system/gis/resource/getWorkResource?engId=1468057546880618497',
					//#endif
				})
				if (code == '200') {
					this.roadworkDeviceInfo = data.workDeviceMap
				} else {
					uni.showToast({
						title: "请求接口失败！"
					})
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	@import './../../utils/mixin.less';
	.home-container {
		width: 750rpx;
		height: 100%;

		.home-title {
			background: linear-gradient(#4befe5, #46d2e4);
			height: 240rpx;
			position: relative;

			.title {
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
			}


		}

		.outer {
			width: 700rpx;
			position: absolute;
			left: 50%;
			top: 190rpx;
			transform: translateX(-50%);

			.tab-nav {

				height: 300rpx;
				background-color: #fff;
				.box-shadow();
				border-radius: 6rpx;
				position: relative;

				.userInfo {
					position: absolute;
					left: 50%;
					top: -50rpx;
					transform: translateX(-50%);
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					view {
						&:nth-child(1) {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							.box-shadow();
							background-color: #fff;

							image {
								width: 100%;
								height: 100%;
							}
						}

						&:nth-child(2) {
							margin-top: 10rpx;
							color: #000000;
							font-size: 24rpx;
						}
					}
				}

				.nav {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 150rpx;
					display: flex;
					justify-content: space-between;

					.nav-item {
						flex: 1;
						text-align: center;
						display: flex;
						justify-content: center;
						flex-direction: column;
						align-items: center;

						.nav-box {
							width: 60rpx;
							height: 60rpx;
							border-radius: 10rpx;
							text-align: center;
							// background: radial-gradient(#cdf6f8, #96deda);
							background: radial-gradient(#4befe5, #46d2e4);
							margin-bottom: 10rpx;

							image {
								width: 50rpx;
								height: 50rpx;
								margin-top: 5rpx;

								// border-radius: 50%;
							}


						}



						.text {
							font-size: 24rpx;
							padding-bottom: -20rpx;
						}
					}
				}
			}

			.roadwork-info {
				margin-top: 40rpx;
				.title {
					font-size: 28rpx;
					line-height: 60rpx;
					font-weight: 700;
				}

				.sub-title {
					font-size: 24rpx;
					line-height: 50rpx;
					font-weight: 700;
				}

				.content {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}

				.item {
					height: 110rpx;
					background-color: #f4fffe;
					width: 226rpx;
					margin-bottom: 20rpx;
					border-radius: 6rpx;
					font-size: 24rpx;
					box-sizing: border-box;
					padding-top: 10rpx;
					padding-left: 16rpx;

					view {
						&:nth-child(2) {
							color: #35b8b1;
							margin-top: 10rpx;
						}
					}
				}
			}

			.status-info {
				margin-top: 20rpx;

				.title {
					font-size: 28rpx;
					line-height: 60rpx;
					font-weight: 700;
				}

				.content {

					.item {
						overflow: hidden;
						border-radius: 6rpx;
						.box-shadow();
						margin-bottom: 10rpx;
						box-sizing: border-box;
						padding: 0 10rpx;
						font-size: 24rpx;
						padding-bottom: 20rpx;

						.item-title {
							line-height: 60rpx;
							font-weight: 700;
						}

						.item-item {
							box-sizing: border-box;
							float: left;
							width: calc(50% - 6rpx);
							background-color: #f4fffe;
							padding-top: 10rpx;
							padding-bottom: 10rpx;
							margin-right: 10rpx;
							padding-left: 10rpx;
							padding-right: 10rpx;
							margin-bottom: 10rpx;

							&:nth-child(odd) {
								margin-right: 0;
							}

							// &:nth-child(4) {
							// 	margin-right: 0;
							// }

							>view {
								line-height: 40rpx;
							}

							.online {
								display: flex;
								align-items: center;
								justify-content: space-between;
							}

							.tag {
								display: inline-block;
								width: 30rpx;
								height: 30rpx;
								border-radius: 50%;
								background-color: #24f57f;
								text-align: right;
							}
						}
					}
				}
			}


		}
	}
</style>
